<template>
	<div class="container">
		<el-tabs v-model="activeName">
			<el-tab-pane :label="CHANNEL[item.channel]" :name="String(index)" v-for="(item,index) in tabsData"
				:key="index">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>线下转账：企业支付宝账号：{{item.account}}</span>
						<span style="padding-left: 60px;">账户名：{{item.accountName}}</span>
					</div>
					<div style="color:#ed1324;border-bottom: 1px solid #ccc;">* {{item.accountTip}}</div>
					<div class="payImage">
						<el-image :src="item.accountImage"
							style="width:300px;height: 300px;margin-top:30px;margin-bottom: 15px;"></el-image>
					</div>
					<div class="rechangeBtn">
						<el-button type="primary" @click="rechange">充值申请</el-button>
					</div>
				</el-card>
			</el-tab-pane>
		</el-tabs>


		<el-form :inline="true" :model="form" style="margin-top: 30px;">
			<el-form-item label="交易单号">
				<el-input v-model="form.tradeNo" placeholder="请输入交易单号" clearable></el-input>
			</el-form-item>
			<el-form-item label="充值状态">
				<el-select v-model="form.status" placeholder="请选择充值状态" clearable>
					<el-option label="待充值" value="0"></el-option>
					<el-option label="充值成功" value="1"></el-option>
					<el-option label="充值失败" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="日期">
				<el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期" clearable>
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSeach" icon="el-icon-search">搜索</el-button>
			</el-form-item>
		</el-form>

		<el-table border :data="tableData">
			<el-table-column prop="tradeNo" label="交易单号" align="center"></el-table-column>
			<el-table-column prop="images" label="充值截图" align="center" width="120">
				<template slot-scope="scope">
					<el-image style="width: 80px; height: 80px" :src="scope.row.images"
						:preview-src-list="[scope.row.images]">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column prop="merchantShortName" label="商家简称" align="center"></el-table-column>
			<el-table-column prop="userPhone" label="商家手机号" align="center"></el-table-column>
			<el-table-column prop="rechargeMoney" label="充值金额" align="center"></el-table-column>
			<el-table-column prop="channel" label="充值渠道" align="center"></el-table-column>
			<el-table-column prop="status" label="充值状态" align="center">
				<template slot-scope="scope">
					<span>{{STATUS[scope.row.status]}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="createDate" label="申请时间" align="center"></el-table-column>
			<el-table-column prop="successTime" label="充值成功时间" align="center"></el-table-column>
			<el-table-column prop="reason" label="充值失败原因" align="center"></el-table-column>
		</el-table>
		<div class="page">
			<el-pagination :page-size="form.size" :current-page="form.page" layout="prev, pager, next,total,jumper"
				:total="total" background @current-change="currentChange">
			</el-pagination>
		</div>

		<el-dialog title="充值申请" :visible.sync="dialogVisible">
			<el-form :model="rechangeForm" :rules="rules" ref="rechangeForm" label-width="120px">
				<el-form-item label="交易单号" prop="tradeNo">
					<el-input v-model="rechangeForm.tradeNo" placeholder="请输入交易单号" clearable></el-input>
				</el-form-item>
				<el-form-item label="充值金额" prop="rechargeMoney">
					<el-input-number v-model="rechangeForm.rechargeMoney" :min="0" label="请输入充值金额" clearable>
					</el-input-number>
				</el-form-item>
				<el-form-item label="上传截图">
					<el-upload class="avatar-uploader" :action="action" :headers="headers" :show-file-list="false"
						:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="rechangeForm.images" :src="rechangeForm.images" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submit('rechangeForm')">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 0,
				tabsData: [],
				CHANNEL: {
					1: '支付宝',
					2: '微信'
				},
				date: [],
				form: {
					startDate: '', //充值开始时间
					endDate: '', //充值结束时间
					merchantId: localStorage.getItem('merchantId'), //商家ID
					tradeNo: '', //交易单号
					status: '', //充值状态
					page: 1,
					size: 10
				},
				STATUS: {
					0: "待充值",
					1: '充值成功',
					2: '充值失败'
				},
				tableData: [],
				total: 0,
				dialogVisible: false,
				rechangeForm: {
					images: '', //上传截图
					rechargeMoney: '', //充值金额
					tradeNo: '' //支付宝交易单号
				},
				rules: {
					rechargeMoney: [{
						required: true,
						message: '请输入充值金额',
						trigger: 'blur'
					}],
					tradeNo: [{
						required: true,
						message: '请输入交易单号',
						trigger: 'blur'
					}],
				},
				action: '/wsj/' + this.$api.rechargeUpload,
				headers: {
					"Authorization": 'Bearer ' + localStorage.getItem('token')
				},
				imageUrl: ''
			}
		},
		mounted() {
			this.getData();
			this.getAccountRechange();
		},
		methods: {
			getData() {
				this.$http.get(this.$api.getconfig).then(res => {
					if (res.code == 0) {
						this.tabsData = res.data;
					}
				})
			},
			getAccountRechange() {
				this.form.startDate = this.date != null ? this.date[0] : '';
				this.form.endDate = this.date != null ? this.date[1] : '';
				this.$http.get(this.$api.accountRecharge, this.form).then(res => {
					if (res.code == 0) {
						this.tableData = res.data;
						this.total = res.extraInfo;
					}
				});
			},
			onSeach() {
				this.form.page = 1;
				this.getAccountRechange();
			},
			currentChange(val) {
				this.form.page = val;
				this.getAccountRechange();
			},
			rechange() {
				this.rechangeForm = {
					images: '', //上传截图
					rechargeMoney: '', //充值金额
					tradeNo: '' //支付宝交易单号
				},
				this.dialogVisible = true;
			},
			beforeAvatarUpload(file) {
				const isLt10M = file.size / 1024 / 1024 < 10;
				if (!isLt10M) {
					this.$message.error('上传头像图片大小不能超过 10MB!');
				}
				return isLt10M;
			},
			handleAvatarSuccess(res) {
				if (res.code == 0) {
					this.rechangeForm.images = res.data;
				} else {
					this.$message.error(res.msg);
				}
			},
			submit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						const loading = this.$loading({
							lock: true,
							text: 'Loading',
							spinner: 'el-icon-loading',
							background: 'rgba(0, 0, 0, 0.7)'
						});
						this.$http.post(this.$api.rechargeApply, this.rechangeForm).then(res => {
							if (res.code == 0) {
								this.$message({
									type: 'success',
									message: '申请成功！'
								});
								this.dialogVisible = false;
								this.getAccountRechange();
							} else {
								this.$message.error(res.msg);
							}
							loading.close();
						})
					} else {
						return false;
					}
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 15px;
	}

	.clearfix {
		color: #555;
	}

	.page {
		margin-top: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.avatar-uploader>>>.el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader>>>.el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
